<template>
  <el-dialog
    v-model="props.visiable"
    @closed="closedFn"
    v-if="title === 'add' ? true : false"
  >
    <el-form>
      <el-form-item label="账号：">
        <el-input v-model="ownForm.username" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input v-model="ownForm.nickName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="邮箱：">
        <el-input v-model="ownForm.email" type="email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="密码：">
        <el-input v-model="ownForm.password" type="password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="备注：">
        <el-input v-model="ownForm.note" type="textarea" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item label="是否启用：">
        <el-radio-group v-model="ownForm.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="closedFn">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="props.visiable" @closed="closedFn" width="30%" v-else>
    <el-form style="width: 200px; margin-right: 50px">
      <div class="title"><h2>分配角色</h2></div>
      <div class="slect">
        <el-select v-model="value1" multiple placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="button">
        <el-button @click="closedFn">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, watch, ref, reactive, withDefaults, defineEmits } from "vue";
import type { Ref } from "vue";
import type { IAdminListItem } from "../../request/QmsAdminConreiller/index";
import { resource } from "../../request/api";
let emits = defineEmits(["getvisiable", "confirm"]);
// do not use same name with ref
let originForm = ref({}) as Ref<IAdminListItem>; // 相当于一个空的备份
let ownForm = ref({}) as Ref<IAdminListItem>;
// 确定
let onConfirm = () => {
  // console.log(ownForm.value);
  // 将参数返回给父级 ，让父级发请求完成功能
  emits("confirm", ownForm.value);
};
const closedFn = () => {
  //清空 实际上是点击取消的时候,将ownForm恢复成备份的值
  ownForm.value = { ...originForm.value };
  emits("getvisiable", false);
};

let props = withDefaults(
  defineProps<{
    visiable: boolean;
    title: string;
    form: IAdminListItem;
  }>(),
  {
    visiable: true,
    title: "add",
  }
);

// console.log(props.form);

watch(
  () => props.form,
  (newVal) => {
    // console.log(newVal);
    ownForm.value = { ...newVal };
    // originForm.value = { ...newVal }
  }
);
// 分配角色
const value1 = ref([]);
const options = ref([]);
resource.GetAllRole().then((res) => {
  // console.log(res);
  let All = res.map((el) => {
    return {
      value: el.id,
      label: el.name,
    };
  });
  options.value = All;
});
</script>

<style lang="scss" scoped>
.title {
  margin-top: -40px;
  margin-bottom: 30px;

  h2 {
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    position: relative;
    left: 20px;
  }
}
.slect {
  position: relative;
  left: 100px;
  bottom: 10px;
}
.button {
  // margin-top: 100px;
  position: relative;
  left: 250px;
  top: 20px;
}
.el-dialog__body {
  width: 200px;
}
</style>
